<template>
    <div class="bigHigh_box">
        <div class="bigBox">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
                :size="formSize" status-icon>

                <!-- 客户名称 corpName -->
                <!-- 客户状态 corpState -->
                <!-- 客户星级 starRating -->
                <!-- 电子邮箱 cdetailNumber -->
                <!-- 客户类型 user_type -->
                <!-- 详细地址 address -->
                <!-- 部门职务 follow_up_status -->
                <!-- 跟进内容 last_follow_up_date -->
                <!-- 跟进人员 industry -->
                <!-- QQ号码 primary_contact -->
                <!-- 固定电话 birthday -->
                <!-- 联系人姓名 title -->
                <!-- 手机号码 phone_number -->
                <!-- 传真号码 opportunity_id -->
                <!-- 所在地址  previous_follower_id -->
                <!-- 上级客户  top_user -->
                <!-- 备注信息 Aka -->
                <!-- 微信账号 WechatPhone -->
                <!-- 所在地区 myPlace -->
                <!-- 企业规模 enterprise -->
                <!-- 角色 author -->
                <!-- 任务提醒 Task -->
                <!-- 创建下次跟进任务 create_next_task -->
                <!-- 邮件通知  Email_notifications -->
                <el-form-item label="客户名称" prop="corpName">
                    <el-input v-model="ruleForm.corpName" />
                </el-form-item>
                <el-form-item label="助记名称" prop="region">
                    <!-- <el-select v-model="ruleForm.region" >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select> -->
                    <el-input v-model="ruleForm.region" />
                </el-form-item>
                <el-form-item label="所属行业" prop="industry">
                    <el-input v-model="ruleForm.suoshu" />
                </el-form-item>
                <el-form-item label="客户类型">
                    <el-radio-group v-model="ruleForm.user_type" @change="change">
                        <el-radio value="企业客户">企业客户</el-radio>
                        <el-radio value="个人客户">个人客户</el-radio>
                    </el-radio-group>

                </el-form-item>

                <el-form-item label="客户状态" prop="corpState">
                    <!-- <el-select-v2 v-model="ruleForm.corpState" :options="options" /> -->
                    <el-select v-model="ruleForm.corpState" placeholder="客户状态">
                        <el-option label="正在跟进" value="正在跟进" />
                        <el-option label="没有跟进" value="没有跟进" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户星级" prop="starRating">
                    <el-rate v-model="ruleForm.aaa" allow-half />
                </el-form-item>
                <el-form-item label="客户来源" prop="count">
                    <!-- <el-select-v2 v-model="ruleForm.count" :options="options" /> -->
                    <el-select v-model="ruleForm.count" placeholder="客户来源">
                        <el-option label="电话营销" value="正在跟进" />
                        <el-option label="短信跟进" value="没有跟进" />
                    </el-select>
                </el-form-item>
                <el-form-item label="归属人员" prop="ascription">
                    <el-input v-model="ruleForm.ascription" />
                </el-form-item>
                <el-form-item label="所在地区" prop="previous_follower_id">
                    <el-input v-model="ruleForm.previous_follower_id" />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="ruleForm.address" />
                </el-form-item>
                <el-form-item label="企业规模" prop="enterprise">
                    <!-- <el-select-v2 v-model="ruleForm.enterprise" :options="options" /> -->
                    <el-select v-model="ruleForm.enterprise" placeholder="企业规模">
                        <el-option label="微型企业" value="微型企业" />
                        <el-option label="小型企业" value="小型企业" />
                        <el-option label="中型企业" value="中型企业" />
                        <el-option label="大型企业" value="大型企业" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上级客户" prop="top_user">
                    <el-input v-model="ruleForm.top_user" />
                </el-form-item>
                <el-form-item label="备注信息" prop="Aka">
                    <el-input v-model="ruleForm.Aka" type="textarea" placeholder="请输入备注信息" />
                </el-form-item>

                <el-form-item label="注意" prop="create_next_task">
                    <el-checkbox-group v-model="ruleForm.create_next_task">
                        <el-checkbox value="Online activities" name="type">
                            创建下次跟进任务
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="跟进时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date"
                                placeholder="Pick a date" style="width: 300px" />
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center" :span="2">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="跟进内容" prop="last_follow_up_date">
                    <el-input v-model="ruleForm.last_follow_up_date" />
                </el-form-item>
                <el-form-item label="跟进人员" prop="industry">
                    <el-input v-model="ruleForm.industry" />
                </el-form-item>
                <el-form-item label="任务提醒" prop="Task">
                    <el-select v-model="ruleForm.Task" placeholder="任务提醒">
                        <el-option label="准时提醒" value="准时提醒" />
                        <el-option label="提前提醒" value="提前提醒" />
                    </el-select>
                </el-form-item>

                <el-form-item label="注意" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox value="系统信息" name="type">
                            系统信息
                        </el-checkbox>
                        <el-checkbox value="邮件通知" name="type">
                            邮件通知
                        </el-checkbox>
                        <el-checkbox value="短信通知" name="type">
                            短信通知
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <!-- <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="联系人姓名" prop="title">
                    <el-input v-model="ruleForm.title" />
                </el-form-item>
                <el-form-item label="尊称" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio value="未知">未知</el-radio>
                        <el-radio value="先生">先生</el-radio>
                        <el-radio value="女士">女士</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="角色" prop="author">
                    <el-select v-model="ruleForm.author" placeholder="甲方公司">
                        <el-option label="甲方公司" value="甲方公司" />
                        <el-option label="乙方公司" value="乙方公司" />
                    </el-select>
                </el-form-item>
                <el-form-item label="生日" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="ruleForm.date2" type="date" label="Pick a date"
                                placeholder="Pick a date" style="width: 400px" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="部门职务" prop="follow_up_status">
                    <el-input v-model="ruleForm.follow_up_status" />
                </el-form-item>
                <el-form-item label="手机号码" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" />
                </el-form-item>
                <el-form-item label="固定电话" prop="birthday">
                    <el-input v-model="ruleForm.birthday" />
                </el-form-item>
                <el-form-item label="传真号码" prop="opportunity_id">
                    <el-input v-model="ruleForm.opportunity_id" />
                </el-form-item>
                <el-form-item label="电子邮箱" prop="cdetailNumber">
                    <el-input v-model="ruleForm.cdetailNumber" />
                </el-form-item>
                <el-form-item label="微信账号" prop="WechatPhone">
                    <el-input v-model="ruleForm.WechatPhone" />
                </el-form-item>
                <el-form-item label="QQ号码" prop="primary_contact">
                    <el-input v-model="ruleForm.primary_contact" />
                </el-form-item>
                <el-form-item label="所在地区" prop="myPlace">
                    <el-input v-model="ruleForm.myPlace" />
                </el-form-item>
                <el-form-item label="详细地址" prop="name">
                    <el-input v-model="ruleForm.native" />
                </el-form-item>
                <el-form-item label="备注信息" prop="desc">
                    <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入备注信息" />
                </el-form-item>
            </el-form> -->
        </div>

        <div class="bot">
            <div class="mb-4">
                <el-button type="primary" class="bbb" @click="submitForm(ruleFormRef)">创建客户</el-button>
                <el-button type="primary" class="bbb" @click="resetForm(ruleFormRef)" plain>重置</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/store/ticket'


const store = useCounterStore()


onMounted(() => {
    ruleForm.corpName = store.emitData.corpName || ''
    ruleForm.user_type = store.emitData.user_type || ''
    ruleForm.industry = store.emitData.primary_contact || ''
})

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    corpName: '',
    cdetailNumber: "",
    corpState: '',
    user_type: "",
    address: "",
    follow_up_status: "",
    last_follow_up_date: "",
    industry: "",
    primary_contact: "",
    birthday: "",
    starRating: ''
})

const change = (e: any) => {
    console.log(e, '2222');

}
const rules = reactive<FormRules<RuleForm>>({
    corpName: [
        { required: true, message: '请输入你的名称', trigger: 'change' },
    ],
    // industry: [
    //   { required: true, message: '请输入你的名称', trigger: 'change' },
    // ],
    user_type: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],

    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            console.log(ruleForm)
            store.getUpdateData(ruleForm)
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// const resetForm1 = async (formEl: FormInstance | undefined) => {
//     if (!formEl) return
//     formEl.resetFields()
// }

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `准时提醒`,
    label: `准时提醒`,
}))
</script>

<style scoped>
.bbb {
    height: 40px;
    padding: 15px;
}

.bot {
    width: 80%;
    height: 100px;
    /* background-color: aqua; */
    text-align: center;
    margin-top: 30px;
}

.bigBox {
    display: flex;
    justify-content: space-evenly;
}

.bigHigh_box {
    max-height: auto;
    overflow: scroll;
    display: flex;
    /* width: 1200px; */
    flex-direction: column;
    background-color: white;
    padding-top: 20px;
}
</style>